<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>游记明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategy.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <!-- 引入jquery 和 common.js 可以获取到地址栏上拼接的参数 -->
    <script type="text/javascript" src="/js/common.js"></script>
    <script type="text/javascript" src="/js/plugins/form/jquery.form.js"></script>
    <script>
        $(function () {
            var keyword = window.sessionStorage.getItem("keyword");//获取关键字
            //查询条数
            function counts() {
                $.get("/searchs/counts",{keyword:keyword},function (data) {
                    console.log(data);
                          $(".strategy").html("攻略" + "(" + data[2].strategy + ")");
                            $(".travel").html("旅游" + "(" + data[0].travel + ")");
                           $(".user").html("用户" + "(" + data[1].user + ")");
                })
                //进来默认点击
                $("#pills-top").addClass("active").addClass("show");
            }

            counts();

            var currentPage = 1;
            var travelArr = [];
            var mergeTravel = [];
            var mergeUser = [];
            var pages;
            var type = 1;

            if (keyword) {
                //回显数据
                $("#keyword").val(keyword);
                type == 1;
                function strategy(){

                    //搜索攻略
                    $.get("/strategies", {keyword: keyword, currentPage: currentPage, pageSize: 4}, function (data) {
                        travelArr = [];
                        $.merge(travelArr, data.list);
                        console.log(travelArr);
                        console.log("***");
                        var json = {
                            list: travelArr
                        }

                        //共享数据
                        $("#pills-top").renderValues(json, {
                            getHref: function (item, value) {
                                var url = $(item).data('href');
                                $(item).attr("href", url + value);
                            }
                        });
                        currentPage++;
                        pages = data.pages;
                    })
                }
                function travel(){
                    type == 2;
                    //搜索旅游
                    $.get("/travels", {keyword: keyword, currentPage: currentPage, pageSize: 4,state:2}, function (data) {
                        mergeTravel = [];
                        $.merge(mergeTravel, data.list);
                        var json = {
                            list: mergeTravel
                        }

                        //data PageInfo
                        $("#pills-travel").renderValues(json, {
                            getHref: function (item, value) {
                                var url = $(item).data('href');
                                $(item).attr("href", url + value);
                            }
                        });
                        currentPage++;
                        pages = data.pages;
                    })
                }
                //用户
                mergeUser = [];
                function user(){
                    type == 3;
                    $.get("/users", {keyword: keyword, currentPage: currentPage,  pageSize: 6}, function (data) {
                        $.merge(mergeUser, data.list);
                        var json = {
                            list: mergeUser
                        }

                        //data PageInfo
                        $("#pills-user").renderValues(json, {
                            getHref: function (item, value) {
                                var url = $(item).data('href');
                                $(item).attr("href", url + value);
                            }
                        });
                        currentPage++;
                        pages  = data.pages;
                    })
                }
                strategy();
            }


            //点击搜索页面的搜索
            $("#select").click(function () {
                travelArr = [];
                mergeTravel = [];
                mergeUser = [];
                keyword = $("#keyword").val();
                counts();
                if(keyword){
                    //默认查询#strategy
                    $("#strategy").click();
                }else{
                    alert("请输入查询内容");
                }

            })

            //给window绑定滚动事件
            $(window).scroll(function () {
                if ($(window).height() + $(document).scrollTop() + 1 >= $(document).height()) {
                    //如果是大于总页数就不发送请求了
                    if (currentPage <= pages && type == 1) {
                        strategy();
                    } else if(currentPage <= pages && type == 2){
                        travel();
                    }else if(currentPage <= pages && type == 3){
                        user();
                    } else {
                        $(document).dialog({
                            type: 'notice',
                            content: "<span class='info-text'>没有更多了!</span>", // 显示的文字
                            autoClose: 1000
                        });
                    }
                }
            });
            //点击谁查询谁
            $("#strategy").click(function () {
                $("#pills-travel").removeClass("active");
                $("#pills-user").removeClass("active");
                currentPage = 1;
                pages;
                type = 1;
                travelArr = [];
                strategy();
            })
            $("#travel").click(function () {
                $("#pills-user").removeClass("active");
                currentPage = 1;
                pages;
                type = 2;
                mergeTravel = [];
                travel();
            })
            $("#user").click(function () {
                currentPage = 1;
                pages;
                type = 3;
                mergeUser = [];
                user();
            })

        });
    </script>

</head>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col-2">
            <a href="javascript:void(window.history.length > 1 ? window.history.back() : document.location.href='index.html')">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
        <div class="col-10">
            <div class="input-group-sm search">
                <input class="form-control" type="text" placeholder="搜索:攻略,游记,日报,用户" id="keyword">
            </div>

            <div class="col-2"></div>
            <i class="fa fa-search" id="select"
               style="color:white;font-size:25px;position: absolute;top: 23%;right:1%"></i>

        </div>


    </div>
</div>
</div>

<ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab" role="tablist">
    <li class="nav-item" style="width: 25%">
        <a id="strategy" class="nav-link clickTab active show" id="pills-top-tab" data-toggle="pill" href="#pills-top">
            <span class="strategy">攻略</span>
        </a>
    </li>
    <li class="nav-item" style="width: 25%">
        <a id="travel" class="nav-link clickTab" data-toggle="pill" href="#pills-travel">
            <span class="travel">旅游</span>
        </a>
    </li>
    <li class="nav-item" style="width: 25%">
        <a id="daily" class="nav-link clickTab" data-toggle="pill" href="#pills-daily">
            <span class="daily">日报(0)</span>
        </a>
    </li>
    <li class="nav-item" style="width: 25%">
        <a id="user" class="nav-link clickTab" data-toggle="pill" href="#pills-user">
            <span class="user">用户</span>
        </a>
    </li>

</ul>

<div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade " id="pills-top">
        <div class="askComment">
            <div id="strategies">
                <div class="container strategyCommend" render-loop="list">
                    <div>
                        <br/>
                        <div class="row hot">
                            <div class="col-12 strategies">
                                <a data-href="strategyCatalogs.html?id=" render-key="list.id" render-fun="getHref">
                                    <img render-src="list.coverUrl">
                                    <p render-html="list.title"></p>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="tab-pane fade " id="pills-travel">
        <div class="askComment">
            <div id="travels">
                <div class="container strategyCommend">
                    <br/>
                    <div class="row hot" render-loop="list">
                        <div class="col-12 travels">
                            <a data-href="travelContent.html?id=" render-key="list.id" render-fun="getHref">
                                <img render-src="list.coverUrl">
                                <p render-html="list.title"></p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-pane fade " id="pills-daily">
        <div class="askComment">
            <div id="dailys">
                <div class="container dailyCommend" render-loop="list">
                    <div>
                        <br/>
                        <div class="row hot">
                            <div class="col-12 dailys">
                                <a data-href="dailyContent.html?id=" render-key="list.id" render-fun="getHref">
                                    <img render-src="list.coverUrl">
                                    <p render-html="list.title"></p>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="tab-pane fade " id="pills-user">
        <div class="askComment">
            <div id="users">
                <div class="container strategyCommend">
                    <br/>
                    <div class="row hot" render-loop="list">
                        <div class="col-6 users">
                            <a data-href="userProfiles.html?id=" render-key="list.id" render-fun="getHref">
                                <img render-src="list.headImgUrl">
                                <p render-html="list.nickName"></p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
</div>


</body>


</html>